<template lang="html">
    <div class="filter">
        <div class="filter-top">

            <el-input class="filter-item" placeholder="彩币ID" v-model="listQuery.colorId"></el-input>
            <el-date-picker @change="setEndDate" v-model="listQuery.createTime" type="date" format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>

            <!-- <el-select v-model="listQuery.status" placeholder="发行状态">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select> -->

            <el-button type="primary" icon="search" @click="search">搜索</el-button>

        </div>

        <div class="filter-cen" style="width:100%">
            <el-table :fit="true" :data="tableData" border class="centable" :default-sort = "{prop: 'date', order: 'descending'}" v-loading.body="loading">
                <el-table-column :align="'center'" prop="colorId" label="彩币ID" width="90"></el-table-column>
                <el-table-column :align="'center'" prop="name" label="彩币中文名称"></el-table-column>
                <el-table-column :align="'center'" prop="ename" label="彩币英文全称"></el-table-column>
                <el-table-column :align="'center'" prop="shortName" label="彩币英文简称"  ></el-table-column>
                <el-table-column :align="'center'" prop="remark" label="审核意见">
                    <template scope="scope">
                        <el-tooltip class="tooltip-item" effect="dark" :content="scope.row.remark" placement="top">
                            <el-tag>{{scope.row.remark}}</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column :align="'center'" prop="contractUrl" label="官方网站"  ></el-table-column>
                <el-table-column :align="'center'" prop="totalAmount" label="发行量"  ></el-table-column>
                <el-table-column :align="'center'" prop="issueTime" width="180" label="发行时间"></el-table-column>
                <el-table-column :align="'center'" label="发行状态" width="120">
                    <template scope="scope">
                        <el-tag>{{scope.row.status | transformStatus}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :align="'center'" label="操作" width="90">
                    <template scope="scope">
                        <el-button @click.native.prevent="eidt(scope.$index, scope.row)" type="text" size="small">{{authlevel ? '提交' : '审核'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="filter-page" v-show="tableData.length != 0">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pageTotal">
            </el-pagination>
        </div>


        <el-dialog title="详情" :visible.sync="dialogFormVisible">
             <el-form :model="dialogForm" :rules="rules" ref="dialogForm">

                <div v-if="!authlevel">
                    <el-button type="primary" @click="adopt(5)">审核通过</el-button>
                    <el-button type="primary" @click="adopt(3)">审核不通过</el-button>
                    <el-button type="primary" @click="adopt(4)">流程终止</el-button>
                    <el-button @click="dialogFormVisible = false" type="primary">取消</el-button>

                </div>


                <div v-if="authlevel">
                    <el-button v-if="dialogForm.status===5" type="primary" @click="commit('dialogForm')">提交</el-button>
                    <el-button v-if="dialogForm.status!==5" type="primary" @click="resSubmit('dialogForm',checkStatus ? 6 : 2)">重新提交</el-button>
                </div>
                <br>


                <el-form-item label="审核意见:" :label-width="formLabelWidth">
                    <el-input type="textarea" :maxlength="251" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="dialogForm.remark" :disabled="authlevel">
                    </el-input>
                </el-form-item>

                <!-- 分权限判断现实 -->
               <div v-if="((dialogForm.status===5 || dialogForm.status === 7) && authlevel) || (dialogForm.status===6 && !authlevel)">
                <h4 >资产信息</h4>
                <el-form-item label="资产地址：" prop="assetAddress" class="form-ipt" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.assetAddress" :disabled="!authlevel"></el-input>
                </el-form-item>
               </div>

                <h4 >基本信息</h4>
                <el-form-item label="彩币ID:" prop="colorId" :label-width="formLabelWidth">
                  <el-input v-model="dialogForm.colorId" :disabled="checkStatus" readonly>
                        <template v-if="(dialogForm.status!==5 && authlevel) && dialogForm.status !== 7" slot="append" >
                            <el-color-picker class="colorclick" v-model="dialogForm.colorId"></el-color-picker>
                        </template>
                  </el-input>
                </el-form-item>

                <!-- <el-form-item label="@币:" prop="baseCoinType" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.baseCoinType" :disabled="checkStatus"></el-input>
                </el-form-item> -->

                <el-form-item label="彩币中文名称:" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.name" :disabled="checkStatus"></el-input>
                </el-form-item>

                <el-form-item label="彩币英文全称:" prop="ename" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.ename" :disabled="checkStatus"></el-input>
                </el-form-item>

                <el-form-item label="彩币英文简称:" prop="shortName" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.shortName" :disabled="checkStatus"></el-input>
                </el-form-item>

                <el-form-item label="发行主体:" prop="issuingSubject" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.issuingSubject" :disabled="checkStatus"></el-input>
                </el-form-item>

                <el-form-item label="官方网站:" prop="contractUrl" :label-width="formLabelWidth">
                    <el-input type="text" v-model="dialogForm.contractUrl" :disabled="checkStatus"></el-input>
                </el-form-item>

                <el-form-item label="发行量:" prop="totalAmount" :label-width="formLabelWidth">
                    <el-input type="number" v-model.number="dialogForm.totalAmount" :disabled="checkStatus"></el-input>
                </el-form-item>

                <el-form-item label="彩币LOGO:" prop="logoUrl" :label-width="formLabelWidth">
                    <el-input type="hidden" v-model="dialogForm.logoUrl" placeholder="logoUrl:"></el-input>
                    <UploadImg
                        @onChange="getLogoUrl"
                        targetUrl="path"
                        :Place="placeholder"
                        :imgSrc="imgSrc"
                        :isEdit="(dialogForm.status!==5 && authlevel) && dialogForm.status !== 7"
                    ></UploadImg>
                </el-form-item>

                <el-form-item label="彩币描述:" prop="description" :label-width="formLabelWidth">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="dialogForm.description" :disabled="checkStatus"></el-input>
                </el-form-item>



            </el-form>

        </el-dialog>

    </div>
</template>

<script>
import UploadImg from "@/components/commons/uploadimg";
export default {
  name: "agency",
  components: {
    UploadImg
  },
  data() {
    return {
      msg: "agency",
      loading: true,
      imgSrc: "",
      checkStatus: false,
      dialogFormVisible: false,
      formLabelWidth: "110px",
      placeholder: "点击上传图片",
      listQuery: {
        colorId: "", //彩色币id
        createTime: "", //创建时间
        orderBy: "createTime desc", //排序asc desc
        pageNum: 1, //当前页码（从1开始）
        pageSize: 10
        // "status"        : 2,//审核状态 1：暂存 2：提交（待审核） 3：初审未通过 4：终止 5：初审通过 6：待终审 7：终审未通过 8：终审通过
      },
      pageTotal: 0,
      tableData: [],
      rules: {
        colorId: [{ required: true, message: "请输入彩色币色值", trigger: "change" }],
        assetAddress: [
          {
            required: true,
            message: "请输入资产地址",
            trigger: "change"
          }
        ],
        baseCoinType: [
          { required: true, message: "请输入@币（基础币）", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入彩色币名称", trigger: "blur" }],
        ename: [{ required: true, message: "请输入彩色币英文名称", trigger: "blur" }],
        shortName: [{ required: true, message: "请输入彩色币简称", trigger: "blur" }],
        issuingSubject: [
          { required: true, message: "请输入发行主体", trigger: "blur" }
        ],
        contractUrl: [
          { required: true, message: "请输入官方网站", trigger: "blur" }
        ],
        totalAmount: [
          { required: true, type: "number", message: "请输入发行量", trigger: "blur" }
        ],
        description: [{ required: true, message: "请输入描述", trigger: "blur" }],
        logoUrl: [{ required: true, message: "请添加LOGO图片", trigger: "change" }]
      },
      dialogForm: {
        assetAddress: "", //资产地址
        colorId: "", //彩色币ID
        baseCoinType: "", //@币（基础币）
        name: "", //彩色币名称
        ename: "", //英文名称
        shortName: "", //彩色币简称
        issuingSubject: "", //发行主体
        contractUrl: "", //官方网站
        totalAmount: 0, //发行量
        description: "", //描述
        logoUrl: "", //LOGO图片url
        idSeq: "", //idSeq
        remark: "" //审核意见
      }
    };
  },

  created() {
    let GETTER = this.$store.getters;
    this.UserAuthLevel = GETTER.G_USER_AUTH_LEVEL;

    if (this.UserAuthLevel === 1) {
      this.authlevel = true; //发行方
    } else if (this.UserAuthLevel === 2) {
      this.authlevel = false; //审核方
    }

    this.getList();
  },
  methods: {
    //审核通过
    adopt(val) {
      if (this.dialogForm.status === 6 && val === 5) {
        val = 8;
      } else if (this.dialogForm.status === 6 && val === 3) {
        val = 7;
      }
      this.$http({
        url: "issue/api/v1/issue/audit",
        method: "post",
        body: {
          idSeq: this.dialogForm.idSeq,
          remark: this.dialogForm.remark,
          status: val
        }
      }).then(res => {
        let data = res.data;
        if (data.responseCode === 1) {
          this.$notify({
            title: "温馨提示",
            message: "审核成功",
            type: "success",
            duration: 2000
          });
          this.dialogFormVisible = false;
          this.getList();
        } else {
          this.$notify({
            title: "温馨提示",
            message: "审核失败",
            type: "error",
            duration: 2000
          });
        }
      });
    },

    //上传图片
    getLogoUrl(params) {
      this.$http({
        url: "issue/api/v1/issue/order/imgUpload",
        method: "post",
        body: params
      }).then(res => {
        let data = res.data;
        if (data.responseCode === 1) {
          this.dialogForm.logoUrl = res.data.responseData;
        } else {
          this.$notify({
            title: "失败",
            message: "上传成功",
            type: "error",
            duration: 2000
          });
        }
      });
    },

    // 提交资产地址
    commit(dialogForm) {
      this.$refs[dialogForm].validate(valid => {
        if (valid) {
          this.$http({
            url: "issue/api/v1/issue/order/assetInfo",
            method: "post",
            body: {
              assetAddress: this.dialogForm.assetAddress,
              idSeq: this.dialogForm.idSeq
            }
          }).then(
            res => {
              let data = res.data;
              if (data.responseCode === 1) {
                this.$notify({
                  title: "温馨提示",
                  message: "提交成功",
                  type: "success",
                  duration: 2000
                });
              } else {
                this.$notify({
                  title: "温馨提示",
                  message: data.responseData,
                  type: "error",
                  duration: 2000
                });
              }
              this.dialogFormVisible = false;
              this.getList();
            },
            err => {
              console.log(err);
            }
          );
        }
      });
    },

    // 修改后重新提交
    resSubmit(dialogForm, status) {
      let newData = {
        contractUrl: this.dialogForm.contractUrl,
        baseCoinType: this.dialogForm.baseCoinType,
        colorId: this.dialogForm.colorId,
        description: this.dialogForm.description,
        ename: this.dialogForm.ename,
        idSeq: this.dialogForm.idSeq,
        issuingSubject: this.dialogForm.issuingSubject,
        logoUrl: this.dialogForm.logoUrl,
        name: this.dialogForm.name,
        shortName: this.dialogForm.shortName,
        status: status,
        totalAmount: this.dialogForm.totalAmount
      };

      // this.dialogForm.status = status;
      this.$refs[dialogForm].validate(valid => {
        if (valid) {
          this.transformColorID(newData); //转换颜色
          this.$http({
            url: "issue/api/v1/issue/order/issueOrder",
            method: "put",
            body: newData
          }).then(res => {
            let data = res.data;
            if (data.responseCode === 1) {
              this.$notify({
                title: "成功",
                message: "提交成功",
                type: "success",
                duration: 2000
              });
            } else {
              this.$notify({
                title: "失败",
                message: "提交失败",
                type: "error",
                duration: 2000
              });
            }
            this.dialogFormVisible = false;
            this.getList();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 获取列表数据
    getList() {
      this.$http({
        url: "issue/api/v1/issue/order/upcomingTasks",
        method: "post",
        body: this.listQuery
      }).then(
        res => {
          let data = res.data;
          if (data.responseCode === 1) {
            this.tableData = data.responseData.issueOrderList;
            this.pageTotal = data.responseData.page.count;
            this.listQuery.pageSize = data.responseData.page.pageSize;
            this.loading = false;
          }
        },
        err => {
          this.loading = false;
        }
      );
    },
    search() {
      this.getList();
    },
    // 编辑
    eidt(index, rows) {
      // console.log(rows.logoUrl);
      this.dialogFormVisible = true;
      this.dialogForm = this.clone(rows);
      this.dialogForm.colorId = "#" + this.dialogForm.colorId;

      this.checkStatus =
        this.dialogForm.status === 5 ||
        !this.authlevel ||
        this.dialogForm.status === 7;

      if (this.dialogForm.logoUrl) {
        this.imgSrc = this.dialogForm.logoUrl;
      } else if (this.UserAuthLevel === 2 && this.dialogForm.logoUrl == "") {
        this.placeholder = "暂未上传图片";
      }
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    setEndDate(val) {
      this.listQuery.createTime = val;
    },
    transformColorID(obj) {
      if (obj.colorId) {
        obj.colorId = obj.colorId.replace("#", "");
      }
    },
    clone(arg) {
      let o =
        arg.constructor === Array &&
        arg instanceof Array &&
        Object.prototype.toString.call(arg) == "[object Array]"
          ? []
          : {};
      for (let e in arg) {
        o[e] = arg.typeof === "object" ? arg.clone() : arg[e];
      }
      return o;
    }
  }
};
</script>

<style lang="less">
.filter {
  padding: 0 20px;
}

.filter-top {
  padding: 20px 0;
  .filter-item {
    width: 200px;
    display: inline-block; // vertical-align: middle;
  }
}

.filter-page {
  padding: 15px 0;
}

.el-tag {
  width: 100%;
}

.el-tooltip__popper {
  max-width: 50%;
}
</style>
